<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body a {
            text-decoration: none;
            color: #0d3a4b;
        }

        .active {
            color: #ffffff;
        }

        .wrap {
            width: 700px;
            height: 500px;
            background-color: skyblue;
            margin: 0 auto;
            position: relative;
        }

        .wrap #table {
            width: 460px;
            border-radius: 12px;
            position: absolute;
            left: 50%;
            top: 160px;
            transform: translateX(-50%);
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap #table thead {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            color: #fff;
            background: #4cbfe5;
        }

        .wrap #table thead a {
            color: #fff;
        }

        .wrap #table tbody {
            color: #19c2ff;
        }

        .wrap #table tbody a {
            color: #19c2ff;
        }

        .wrap #table tbody tr {
            background: #fff;
        }

        .ctrl {
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .ctrl div {
            width: 300px;
            line-height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        h1 {
            text-align: center;
            padding-top: 20px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h1>员工列表</h1>
        <div class="ctrl">
            <div class="age_sort nu">
                <a href="javascript:;">年龄从小到大</a>
                <a href="javascript:;">年龄从大到小</a>
                <a href="javascript:;" class="active">默认排序</a>
            </div>
            <div class="gender_show">
                <a href="javascript:;">只显示男性</a>
                <a href="javascript:;">只显示女性</a>
                <a href="javascript:;" class="active">默认</a>
            </div>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>0</td>
                    <td>小明</td>
                    <td>24</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var data = [{
                id: 1,
                name: '小明',
                age: 24,
                gender: '男'
            },
            {
                id: 2,
                name: '小芳',
                age: 30,
                gender: '女'
            },
            {
                id: 3,
                name: '小美',
                age: 31,
                gender: '女'
            },
            {
                id: 4,
                name: '小刚',
                age: 21,
                gender: '男'
            },
            {
                id: 5,
                name: '小琪',
                age: 18,
                gender: '女'
            }
        ];

        /* 核心思想  : 数据驱动视图 */


        //封装渲染数据函数
        function renderDom(data) {
            //获取tbody dom对象
            const tbEl = document.querySelector("tbody")
            //清空内部静态
            tbEl.innerHTML = "";
            //遍历数据,根据数据生成tr  添加内部内容数据
            data.forEach(item => {
                //创建tr  DOM对象
                let trEl = document.createElement("tr");
                //模板字符串渲染数据
                let str = `
                    <th>${item.id}</th>
                    <th>${item.name}</th>
                    <th>${item.age}</th>
                    <th>${item.gender}</th>
            `
                //tr中添加内容数据
                // innerHTML 接收的参数是字符串
                trEl.innerHTML = str;
                //tr DOM对象追加进 tbody DOM对象
                //appendChild 接收的参数是对象
                tbEl.appendChild(trEl);
            })
        }
        //调用渲染数据函数  传入数据data
        renderDom(data);



        //年龄排序

        //获取年龄所有的 a DOM对象
        const ageAll = document.querySelectorAll(".age_sort a");
        //把所有排序方法都放入一个数组中
        //下标0   年龄升序的排序代码
        const sortArr = [data => 
            //sort 方法会改变原数组  利用JSON方法深拷贝一份data
             JSON.parse(JSON.stringify(data)).
            //排序 年龄升序
            sort((a, b) => a.age - b.age)
            //返回排序后的数据            
            //下标1 年龄降序的排序代码
        , data => 
            //sort 方法会改变原数组  利用JSON方法深拷贝一份data
             JSON.parse(JSON.stringify(data)).
            //排序 年龄降序
            sort((a, b) => b.age - a.age)
            //返回排序后的数据 
            //下标2 默认年龄排序代码
        , data => data]
        //遍历所有年龄排序 DOM 对象 a   添加点击事件 
        ageAll.forEach((item, key) => item.onclick = () => {
            // 判断循环的 索引值 是否和点击的按钮的索引值一致 ,一致就添加类名,高亮显示,不一致就删除类名,取消高亮
            ageAll.forEach((ele, k) => k === key ? ele.classList.add("active") : ele.classList.remove("active"));
            //根据点击事件根据下标(key值)调用数组中对应的排序方法,传入参数原数据
            let res = sortArr[key](data);
            //调用渲染数据函数重新渲染数据
            renderDom(res);
        })


        //性别排序

        //获取性别所有的 a DOM对象
        const genderAll = document.querySelectorAll(".gender_show a");
        //所有过滤方法都放入一个数组
        const genderArr = [data => data.filter(item => item.gender === "男"), data => data.filter(item => item.gender ==="女"), data => data]
        //遍历所有性别排序 DOM对象a 添加点击事件
        genderAll.forEach((item, key) => item.onclick = () => {
            // 判断循环的 索引值 是否和点击的按钮的索引值一致 ,一致就添加类名,高亮显示,不一致就删除类名,取消高亮
            genderAll.forEach((ele, k) => k === key ? ele.classList.add("active") : ele.classList.remove("active"));
            //根据点击事件根据下标(key值)调用数组中对应的过滤方法,传入参数原数据
            let res = genderArr[key](data);
            //调用渲染数据函数重新渲染数据
            renderDom(res);
        })
    </script>
</body>

</html>